<template>
    <div id="questionsView">
        <a-button type="primary" @click="handleClick()">添加点餐类型</a-button>
        <a-divider size="0" />
        <a-table
                :ref="tableRef"
                :columns="columns"
                :data="dataList"
        >
            <template #image="{ record }">
                <img width="30" height="30" :src=record.image alt="">
            </template>
        </a-table>

        <div class="foodModalForm">
            <!--        弹出框-->
            <a-modal v-model:visible="visible" title="添加点餐类型" @cancel="handleCancel()" @before-ok="handleBeforeOk">
                <a-form :model="form">
                    <a-form-item field="name" label="标签">
                        <a-input v-model="form.label" allow-clear/>
                    </a-form-item>

                    <a-form-item field="name" label="图标">
                        <a-space direction="vertical" :style="{ width: '100%' }">
                            <a-upload
                                action="/"
                                :fileList="file ? [file] : []"
                                :show-file-list="false"
                                @change="onChange"
                                @progress="onProgress"
                            >
                                <template #upload-button>
                                    <div
                                        :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                                    >
                                        <div
                                            class="arco-upload-list-picture custom-upload-avatar"
                                            v-if="file && file.url"
                                        >
                                            <img :src="file.url"/>
                                            <div class="arco-upload-list-picture-mask">
                                                <IconEdit/>
                                            </div>
                                            <a-progress
                                                v-if="file.status === 'uploading' && file.percent < 100"
                                                :percent="file.percent"
                                                type="circle"
                                                size="mini"
                                                :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                                            />
                                        </div>
                                        <div class="arco-upload-picture-card" v-else>
                                            <div class="arco-upload-picture-card-text">
                                                <IconPlus/>
                                                <div style="margin-top: 10px; font-weight: 600">Upload</div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </a-upload>
                        </a-space>
                    </a-form-item>

                </a-form>
            </a-modal>
        </div>
    </div>
</template>
<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";

import {TypeDTO, TypeVO} from "../type/type";
import {add, getTypeAPI} from "../service/type.ts";
import {IconEdit} from "@arco-design/web-vue/es/icon";



const tableRef = ref();

const dataList = ref<TypeVO[]>([]);

const columns = [
    {
        title: "ID",
        dataIndex: "id",
    },
    {
        title: "类型名称",
        dataIndex: "label",
    },
    {
        title: "标签",
        slotName: "image",
    },
];
const file = ref();
const visible = ref(false)
const handleClick = () => {
    visible.value = true
}
const handleCancel = () => {
    visible.value = false;
}

const onChange = (_, currentFile) => {
    file.value = {
        ...currentFile,
    };
};
const onProgress = (currentFile) => {
    file.value = currentFile;
};
const form = ref<TypeDTO>({
    label:"",
    file: file.value,
    biz: "food_image"
})
/**
 * 提交
 * */
const handleBeforeOk = async (done) => {
    const isValid = ref(true)
    form.value.file = file.value.file;

    const formData = new FormData()
    for (const key in form.value) {
        if (form.value[key] != "") {
            formData.append(key, form.value[key])
        } else {
            isValid.value = false;
        }

    }
    if (isValid.value) {
        const res = await add(formData);
        if (res.data != null && res.data.id > 0) {
            alert("添加成功")
            await loadData();
        } else {
            alert("添加失败")
        }
    } else {
        alert("请填写完整")
    }
    done()
};
const loadData = async () => {
    const res = await getTypeAPI();
    dataList.value = res.data;
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
    loadData();
});

const doSubmit = () => {
    alert("待完成")
}


</script>

<style scoped></style>
